import axios from 'axios'
import React, { useEffect, useState } from 'react'
import style from './Book.module.css'
import { Link } from 'react-router-dom'
export default function Book(props) {
  let [dataFlag, changeDataFlag] = useState(false)
  let [cover, changeCover] = useState('/public/img/defaultCover/cover.png')
  useEffect(() => {
    if (props.bookData) {
      changeDataFlag(true)
      // console.log(props.bookData);
    }
  }, props.bookData)
  let unfollow = async (bookID) => {
    let res = await axios.get(`/unfollow?bookID=${bookID}`)
    // console.log(res);
    if (res.data.code == 205) {
      if (follow == bookID) {
        changeFollow('')
      } else {
        changeFollow(bookID)
      }
    }
  }
  let [follow, changeFollow] = useState()
  return (
    <div>
      <div className={style.bigBox}>
        {
          dataFlag ?
            <div>
              {
                props.bookData.map((el) => {
                  return (
                    <div className={style.item}>
                      <div>
                        <Link className={style.imgLink} to={{ pathname: `/xiangqing/${el.bookID}` }}>
                          <img src={el.cover} alt="" />
                        </Link>
                      </div>
                      <div>
                        <Link className={style.spanLink} to={{ pathname: `/xiangqing/${el.bookID}` }}>
                          <span>{el.name1}</span>
                        </Link>
                        <span className={style.over}>完本</span>
                        <div className={style.bookInfo}>
                          <i className='iconfont icon-yunshangchuan'></i>
                          <Link className={style.chapterLink} to={{ pathname: `/chapter/${el.bookID}/${el.chapter.zhangjie}` }}>
                            <span className={style.chapter}>{el.chapter.chapterName}</span>
                          </Link>
                          &nbsp;
                          <span className={style.time}>{el.chapter.chapterTime}</span>
                        </div>
                        <div className={style.iconBar}>
                          <div><i className='iconfont icon-shu'></i></div>
                          <div><i className='iconfont icon-xinlangweibo'></i></div>
                          <div onClick={() => { unfollow(el.bookID) }}>{follow == el.bookID ? '追书' : '不再追书'}</div>
                        </div>
                      </div>
                    </div>
                  )
                })
              }
            </div> : ''
        }
      </div>
    </div >
  )
}